<template>
  <div class="staff-rating">
    <div class="header">
      <h1 class="page-title">接单员星级管理</h1>
      <p class="page-subtitle">查看和管理接单员的服务星级评价</p>
    </div>
    
    <div class="content">
      <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="接单员姓名">
            <el-input v-model="searchForm.name" placeholder="请输入接单员姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="星级">
            <el-select v-model="searchForm.rating" placeholder="请选择星级" clearable>
              <el-option label="1星" value="1"></el-option>
              <el-option label="2星" value="2"></el-option>
              <el-option label="3星" value="3"></el-option>
              <el-option label="4星" value="4"></el-option>
              <el-option label="5星" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <el-card class="table-card">
        <el-table :data="staffData" border style="width: 100%" v-loading="loading">
          <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
          <el-table-column prop="totalRating" label="总评分" width="100"></el-table-column>
          <el-table-column prop="evaluationCount" label="评价次数" width="100"></el-table-column>
          <el-table-column prop="fiveStarCount" label="五星评价数" width="120"></el-table-column>
          <el-table-column prop="fourStarCount" label="四星评价数" width="120"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" type="primary" @click="viewDetails(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    
    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="星级详情" width="700px">
      <div class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户ID">{{ currentStaff.userId }}</el-descriptions-item>
          <el-descriptions-item label="总评分">{{ currentStaff.totalRating }}</el-descriptions-item>
          <el-descriptions-item label="评价次数">{{ currentStaff.evaluationCount }}</el-descriptions-item>
          <el-descriptions-item label="五星评价数">{{ currentStaff.fiveStarCount }}</el-descriptions-item>
          <el-descriptions-item label="四星评价数">{{ currentStaff.fourStarCount }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ currentStaff.updateTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeeStarAPI } from '@/apis/employee.js'

export default {
  name: 'StaffRating',
  data() {
    return {
      loading: false,
      searchForm: {
        name: '',
        phone: '',
        rating: ''
      },
      staffData: [],
      detailDialogVisible: false,
      currentStaff: {}
    }
  },
  mounted() {
    this.fetchStaffData()
  },
  methods: {
    async fetchStaffData() {
      this.loading = true
      try {
        const params = {
          ...this.searchForm
        }
        
        const res = await getEmployeeStarAPI(params)
        if (res.code === 0) {
          this.staffData = res.data
        } else {
          this.$message.error(res.msg || '获取数据失败')
        }
      } catch (error) {
        this.$message.error('获取数据时发生错误: ' + error.message)
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.fetchStaffData()
    },
    handleReset() {
      this.searchForm = {
        name: '',
        phone: '',
        rating: ''
      }
      this.fetchStaffData()
    },
    viewDetails(staff) {
      this.currentStaff = staff
      this.detailDialogVisible = true
    }
  }
}
</script>

<style scoped>
.staff-rating {
  padding: 20px;
  text-align: center;
}

.page-title {
  font-size: 2.2rem;
  color: #2c3e50;
  margin: 20px 0;
  text-align: center;
  font-weight: bold;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin-bottom: 30px;
  text-align: center;
}

.header {
  margin-bottom: 20px;
}

.content {
  text-align: left;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.table-card {
  margin-bottom: 20px;
}

.detail-content {
  padding: 10px 0;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 1.8rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }
}
</style>